import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// import AutoImport from 'unplugin-auto-import/vite'
// 使用 gzip 或者 brotli 来压缩资源
// import viteCompression from 'vite-plugin-compression';

// 按需加载组件unplugin-vue-components
import Components from 'unplugin-vue-components/vite'
// ui库解析器，也可以自定义，需要安装相关UI库，unplugin-vue-components/resolvers
// 提供了以下集中解析器，使用的时候，需要安装对应的UI库，这里以vant示例
// 注释的是包含的其他一些常用组件库，供参考
import {
  AntDesignVueResolver,
  // VantResolver,
} from 'unplugin-vue-components/resolvers'

// 当你使用unplugin-vue-components来引入ui库的时候，message, notification，toast 等引入样式不生效
// import styleImport, {
//   // AndDesignVueResolve,
//   VantResolve,
//   // ElementPlusResolve,
//   // NutuiResolve,
//   // AntdResolve
// } from 'vite-plugin-style-import'

import postcssPxToViewport from 'postcss-px-to-viewport'




// https://vitejs.dev/config/
export default defineConfig({
  base: '/', // 开发或生产环境服务的公共基础路径 配置引入相对路径
  publicDir: 'public', // 静态资源服务的文件夹
  plugins: [
    vue(),
    Components({
      dirs: ['src/components'], // 目标文件夹
      extensions: ['vue', 'jsx'], // 文件类型
      // dts: 'src/components.d.ts', // 输出文件，里面都是一些import的组件键值对
      // ui库解析器，也可以自定义，需要安装相关UI库
      resolvers: [
        // VantResolver(),
        AntDesignVueResolver({
          importStyle: false,
        }),
      ],
    }),
    // styleImport({
    //   resolves: [
    //     AndDesignVueResolve(),
    //     // VantResolve(),
    //   ],
    // }),
    // AutoImport({
    //   imports: ['vue', 'vue-router', 'vuex', '@vueuse/head'],
    //   // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
    //   // dts: 'src/auto-import.d.ts'
    // }),
    // viteCompression()
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], // 导入时想要忽略的扩展名列表
  },
  css: {
    postcss: {
      plugins: [
        postcssPxToViewport({
          viewportWidth: 1920 //---基于1920宽度为100vw
        })
      ]
    }
  },
  build: {
    minify: "terser", // 必须开启：使用terserOptions才有效果
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      },
    },
    target: ['modules'], // 设置最终构建的浏览器兼容目标
    polyfillModulePreload: true, // 是否自动注入 module preload 的 polyfill
    outDir: 'dist', // 指定输出路径
    assetsDir: 'assets', // 指定生成静态文件目录
    assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
    cssCodeSplit: true, // 启用 CSS 代码拆分
    cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致
    sourcemap: false, // 构建后是否生成 source map 文件
    rollupOptions: {}, // 自定义底层的 Rollup 打包配置
    lib: {}, // 构建为库
    manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件
    ssrManifest: false, // 构建不生成 SSR 的 manifest 文件
    ssr: undefined, // 生成面向 SSR 的构建
    minify: 'esbuild', // 指定使用哪种混淆器
    terserOptions: {}, // 传递给 Terser 的更多 minify 选项
    write: true, // 启用将构建后的文件写入磁盘
    emptyOutDir: true, // 构建时清空该目录
    brotliSize: true, // 启用 brotli 压缩大小报告
    chunkSizeWarningLimit: 500, // chunk 大小警告的限制
    watch: null, // 设置为 {} 则会启用 rollup 的监听器
  },
  // 跨域
  server: {
    //使用IP能访问
    host: "0.0.0.0",
    hmr: true,
    //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
    strictPort: false,
    //自定义代理规则
    proxy: {
      // 选项写法
      "/api": {
        target: "",
        changeOrigin: true,
        secure: false, // 请求 https 地址会导致证书问题导致代理失败，加上secure除掉验证 代理地址是https才会出现这种问题
        // rewrite: (path) => path.replace('', ""),
      },
    },
  },

})
